{% extends layout %}
{% block stylesheet %}
  {{ super() }}
  <style>
    body {
      background-color: #eee;
    }
    .error-page {
      justify-content: center;
    }
    .error-page__msg {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: #fff;
      box-shadow: #aaa 0 0 15px;
    }
    .error-page__msg--text {
      text-shadow: 3px 3px 7px;
    }
  </style>
{% endblock stylesheet %}
{% block main %}
  {{ super() }}
  <div class="row error-page gx-0">
    <div class="col-4 error-page__msg">
      <h1 class="error-page__msg--text color-orange fw-bold">403</h1>
      <p>{{ msg }}</p>
      <button id="go-back" class="btn btn-primary btn-sm">返回登录</button>
    </div>
    <div class="col-4">
      <img src="/public/img/error/403.jpg" alt="img" width="100%"></div>
    </div>
  {% endblock main %}
  {% block script %}
    {{ super() }}
    <script>
      $(function () {
        $('#go-back').click(function () {
          window.location.href = "/login"
        })
      })
    </script>
  {% endblock script %}